// ng-col 样式
.ng-col {
  display: block;
  flex: 0 0 auto;
  box-sizing: border-box;
  max-width: 100%;
}

.ng-col__inner {
  display: block;
  width: 100%;
  height: 100%;
}

// 生成 24 栅格的 span 类
.loop-columns(@index) when (@index > 0) {
  .ng-col-@{index} {
    flex: 0 0 auto;
    width: (@index / 24 * 100%);
  }
  .loop-columns(@index - 1);
}
.loop-columns(24);

// 生成 offset 类
.loop-offsets(@index) when (@index > 0) {
  .ng-col-offset-@{index} {
    margin-left: (@index / 24 * 100%);
  }
  .loop-offsets(@index - 1);
}
.loop-offsets(23);

// 响应式断点
@screen-xs: 768px;   // 手机
@screen-sm: 768px;   // 平板
@screen-md: 992px;   // 桌面
@screen-lg: 1200px;  // 大桌面
@screen-xl: 1920px;  // 超大桌面

// 生成响应式栅格类
.loop-responsive-columns(@prefix, @index) when (@index > 0) {
  .ng-col-@{prefix}-@{index} {
    flex: 0 0 auto;
    width: (@index / 24 * 100%);
  }
  .loop-responsive-columns(@prefix, @index - 1);
}

.loop-responsive-offsets(@prefix, @index) when (@index > 0) {
  .ng-col-@{prefix}-offset-@{index} {
    margin-left: (@index / 24 * 100%);
  }
  .loop-responsive-offsets(@prefix, @index - 1);
}

// xs 断点（默认，小屏幕 <768px）
@media (max-width: (@screen-xs - 1px)) {
  .loop-responsive-columns(xs, 24);
  .loop-responsive-offsets(xs, 23);
}

// sm 断点（≥768px）
@media (min-width: @screen-sm) {
  .loop-responsive-columns(sm, 24);
  .loop-responsive-offsets(sm, 23);
}

// md 断点（≥992px）
@media (min-width: @screen-md) {
  .loop-responsive-columns(md, 24);
  .loop-responsive-offsets(md, 23);
}

// lg 断点（≥1200px）
@media (min-width: @screen-lg) {
  .loop-responsive-columns(lg, 24);
  .loop-responsive-offsets(lg, 23);
}

// xl 断点（≥1920px）
@media (min-width: @screen-xl) {
  .loop-responsive-columns(xl, 24);
  .loop-responsive-offsets(xl, 23);
}
